<template>
	<view class="content">
		<view class="withdrawal-page-header">
			<mynavBar :title="title" :bgcolor="bgColor" :gps="gps"></mynavBar>
		</view>
		<view class="content-body">
			<view class="content-body-type">
				<view class="left">
					支付宝
				</view>
				<view class="right">
					<input placeholder-style="color:#F09500" placeholder="(填写您要提现的支付宝帐号)" v-model="user_phone" />
				</view>
			</view>
		</view>
		<view class="content-body2">
			<view class="content-body-type2">
				<view class="left2">
					金额
				</view>
				<view class="right2">
					<input placeholder-style="color:#F09500" placeholder="(请输入提现金额)" v-model="user_amount" />
				</view>
			</view>
		</view>
		<view class="content-bottom">
			<button class="button-submit" @click="payoutsClick">提交申请</button>
		</view>
	</view>
</template>

<script>
	import mynavBar from '@/components/mynavBar/mynavBar.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			mynavBar
		},
		data() {
			return {
				title: '提现申请',
				gps: '',
				bgColor: 'rgba(165, 42, 42, 0)',
				user_phone: '',
				user_amount: 0,
				platformRatio: 0
			};
		},

		onLoad: function(option) {
			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top + ''
			console.log("胶囊位置信息", arr);
			//#endif
			this.getRewardRatioConfig()
		},
		methods: {
			getRewardRatioConfig() {
				const field_string = `id platform questioner answer type`;
				this.$store.dispatch("remote/query", {
					model: "reward_ratio_config",
					where: {
						type: {
							_eq: "提现手续费"
						},
					},
					field_string: field_string
				}).then(res => {
					this.platformRatio = res.data.platform
				})
			},
			payoutsClick() {
				if (this.user_phone != "" && this.user_amount != 0 && this.user_amount != "" && this.user_amount >= 20) {
					let userId = uni.getStorageSync('userInfo').id
					//查询金额
					this.$store.dispatch('remote/query', {
						model: "user_assets",
						limit: -1,
						field_string: 'user_user balance',
						where: {
							user_user: {
								_eq: userId
							}
						}
					}).then(rs => {
						this.$store.dispatch('remote/mutation', {
							operation: "update_user_assets",
							where: {
								user_user: {
									_eq: userId
								}
							},
							_set: {
								'balance': rs.data.balance - Number(this.user_amount) * 100
							}
						}).then(re => {
							console.log("成功了");
						})

						this.$store.dispatch('remote/mutation', {
							operation: 'insert_user_assets_detail',
							objects: [{
								user_assets_user_assets: rs.data.id,
								change_val: Number(this.user_amount) * (1 - this.platformRatio) *
									100,
								blean: false,
								describe: "提现-用户主动提现消耗" + Number(this.user_amount) * (1 - this
									.platformRatio) + "元",

							}],
							// field_string: `id amount status alipay_account`
						}).then(res => {

						})

					})


					this.$store.dispatch('remote/mutation', {
						operation: 'insert_payouts',
						objects: [{
							user_user: userId,
							amount: Number(this.user_amount) * (1 - this.platformRatio),
							stauts: '已申请',
							type: "提现-用户主动提现消耗" + Number(this.user_amount) * (1 - this.platformRatio) +
								"元",
							alipay_account: this.user_phone,
						}],
						// field_string: `id amount status alipay_account`
					}).then(res => {
						console.log("2222222222222222222", res);
						uni.switchTab({
							url: '/pages/me/me'
						})
					})

				} else {
					uni.showToast({
						title: "请输入支付宝账号与金额，且提现金额大于20元!",
						icon: "none",
						duration: 2000
					})
				}
			}
		},

	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		background-color: #f4f4f4;

		.withdrawal-page-header {
			width: 100%;
			/* #ifdef MP-WEIXIN */
			height: 343rpx;
			/* #endif */
			/* #ifdef H5 */
			height: 260rpx;
			/* #endif */
		}

		.content-body {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 10vh;

			box-sizing: border-box;
			padding: 0 27rpx;
			margin-top: -140rpx;

			.content-body-type {
				width: 95%;
				height: 100%;
				border-radius: 10px;
				background-color: #ffffff;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 32rpx;
					font-weight: 500;
					margin-left: 20px;
					width: 20%;
					position: relative;
				}

				.left::after {
					position: absolute;
					/*绝对定位*/
					// top: 8px;
					/*Y轴方向偏移自身高度的50%*/
					// transform: translatey(-40%);
					/*Y轴方向偏移微调*/
					right: 2vw;
					/*紧靠容器左边缘*/
					content: '';
					/*伪元素需要有内容才能显示*/
					width: 2px;
					/*伪元素宽度*/
					height: 25px;
					/*伪元素高度*/
					background-color: #D8D8D8;
					/*伪元素颜色*/
				}

				.right {

					width: 75%;
				}
			}
		}

		.content-body2 {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 10vh;

			box-sizing: border-box;
			padding: 0 27rpx;
			margin-top: 40rpx;

			.content-body-type2 {
				width: 95%;
				height: 100%;
				border-radius: 10px;
				background-color: #ffffff;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left2 {
					font-size: 32rpx;
					font-weight: 500;
					margin-left: 20px;
					width: 20%;
					position: relative;
				}

				.left2::after {
					position: absolute;
					/*绝对定位*/
					// top: 8px;
					/*Y轴方向偏移自身高度的50%*/
					// transform: translatey(-40%);
					/*Y轴方向偏移微调*/
					right: 2vw;
					/*紧靠容器左边缘*/
					content: '';
					/*伪元素需要有内容才能显示*/
					width: 2px;
					/*伪元素宽度*/
					height: 25px;
					/*伪元素高度*/
					background-color: #D8D8D8;
					/*伪元素颜色*/
				}

				.right2 {

					width: 75%;
				}
			}
		}

		.content-bottom {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding-bottom: 20px;

			.button-submit {
				background-color: #F09500;
				color: #ffffff;
				height: 5vh;
				border-radius: 50rpx;
				width: 50vw;
				font-weight: 500;
				display: flex;
				justify-content: center;
				align-items: center;

			}
		}
	}
</style>